<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>秒杀活动</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="logoArea" class="navbar">
    <div class="navbar">
        <img src="../static/jdms.png" height="500" width="100%" alt="">
    </div>
</div>
<table class="table table-bordered">
    <caption id="cc" style="color: red">最新活动</caption>
    <thead>
    <tr style="text-align: center;" th:height="10" th:width="100">
        <th style="text-align: center">ID</th>
        <th style="text-align: center">秒杀名称</th>
        <th style="text-align: center">商品原价（元）</th>
        <th style="text-align: center">商品图片</th>
        <th style="text-align: center">活动描述</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>

        <tr th:each="list :${list.list}" style="text-align:center;">
            <td th:text="${list.seckillId}"></td>
            <td th:text="${list.shopName}"></td>
            <td th:text="${list.shopPrice}"></td>
            <td>
                <img th:src="${list.shopImgUrl}" width="80" height="80">
            </td>
            <td th:text="${list.shopDescribe}"></td>
            <input id="seckillEndTime" type="hidden" th:value="${#dates.format(list.seckillStartTime,'yyyy-MM-dd HH:mm:ss')}">
            <input id="eTime" type="hidden" th:value="${#dates.format(list.seckillEndTime,'yyyy-MM-dd HH:mm:ss')}">
            <td>
                <br>
                <button  class="btn btn-danger" id="b1" th:onclick="rush([[${list.seckillId}]],[[${list.seckillStartTime}]],[[${list.seckillEndTime}]])">马上抢!</button>
            </td>
        </tr>

</table>
<div  class="navbar">
    <img src="../static/jdmsdb.png" height="350" width="100%" alt="">
</div>
</div>
</body>
<script>
    // function rush(seckillMiddleId,seckillStartTime,seckillEndTime) {
    //     var dat3= new Date().getTime();
    //     var dat = new Date(seckillStartTime).getTime();
    //     var dat2 = new Date(seckillEndTime).getTime();
    //     console.log(dat);
    //     console.log(dat2);
    //     console.log(dat3);
    //     if (dat3>=dat && dat3<=dat2){
    //         location="/sec/particulars?seckillMiddleId="+seckillMiddleId
    //     }else if (dat3<dat){
    //         alert("秒杀时间还没开始");
    //     }else {
    //         alert("秒杀已经结束");
    //     }
    // }
    showTime()

    setInterval(showTime, 1000)

    function showTime() {
        var date = new Date();  //获取当前时间
        var now = date.getTime();  //获取当前GMT时间
        //dateObject.getTime()，dateObject指定的日期和时间距 1970年 1月 1日午夜（GMT 时间）之间的毫秒数。
        var endDate = new Date($("#seckillEndTime").val());  //获取结束时间
        var end = endDate.getTime();  //获取结束GMT时间
        var diffTime = end - now;  //计算时间差
        var d, h, m, s;
        if (diffTime >= 0) {
            s = Math.floor(diffTime / 1000 % 60);
            m = Math.floor(diffTime / 1000 / 60 % 60);
            h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
            d = Math.floor(diffTime / 1000 / 60 / 60 / 24);

            // 封装成函数
            d = addZero(d);
            h = addZero(h);
            m = addZero(m);
            s = addZero(s);

            var time = d + '天' + h + '时' + m + '分' + s + '秒';
            $("#cc").text('距离活动开始还有:' + time)
            $(".btn").attr("disabled", true)
        } else {
            var date = new Date();  //获取当前时间
            var now = date.getTime();  //获取当前GMT时间
            //dateObject.getTime()，dateObject指定的日期和时间距 1970年 1月 1日午夜（GMT 时间）之间的毫秒数。
            var endDate = new Date($("#eTime").val());  //获取结束时间
            var end = endDate.getTime();  //获取结束GMT时间
            var diffTime = end - now;  //计算时间差
            var d, h, m, s;
            if (diffTime >= 0) {
                s = Math.floor(diffTime / 1000 % 60);
                m = Math.floor(diffTime / 1000 / 60 % 60);
                h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
                d = Math.floor(diffTime / 1000 / 60 / 60 / 24);

                // 封装成函数
                d = addZero(d);
                h = addZero(h);
                m = addZero(m);
                s = addZero(s);

                var time = d + '天' + h + '时' + m + '分' + s + '秒';
                $("#cc").text('距离活动结束还有:' + time)
                $(".btn").attr("disabled", false)
            } else {
                $("#cc").text('活动已经结束')
                $(".btn").attr("disabled", true)
            }
        }
    }

    // 为数字添加0前缀
    function addZero(num) {
        if (num < 10) {
            num = '0' + num;
        }
        return num;
    }
    function rush(seckillId,seckillStartTime,seckillEndTime) {
        var dat3= new Date().getTime();
        var dat = new Date(seckillStartTime).getTime();
        var dat2 = new Date(seckillEndTime).getTime();
        console.log(dat);
        console.log(dat2);
        console.log(dat3);
        if (dat3>=dat && dat3<=dat2){
            location="/sec/particulars?seckillId="+seckillId
        }else if (dat3<dat){
            alert("秒杀时间还没开始");
        }else {
            alert("秒杀已经结束");
        }
    }

</script>
</html>
